<template>
  <c-dialog
    title=""
    v-model:visible="dialogVisible"
    @cancel="dialogVisible = false"
    :showCancelButton="false"
    :confirmText="'我知道了'"
    @confirm="dialogVisible = false"
    center
    :header="false"
    class="list-dialog"
  >
    <template #header>
      <div class="header-wrap">
        <p class="g-font-18n1b" style="color: #fff">{{ info.title }}</p>
        <p class="g-font-14n2" style="text-align: center; color: #fff">{{ info.subtitle }}</p>
      </div>
    </template>
    <div class="dialog-content">
      <div class="dialog-main">
        <GVditor
          :content="info.content"
          :isReadOnly="true"
          prop-id="editorDetail"
          style="width: 100%"
        ></GVditor>
      </div>
      <div class="g-mt16 g-font-14n1" v-if="info.files?.length">相关附件：</div>
      <div class="file-list" v-for="(itm, i) in info.files" :key="i" @click="downLoad(itm.fileUrl)">
        <CIcon type="c-xian-putongwenjian" style="margin: 0 4px 0 12px"></CIcon>
        {{ itm.fileName }}
      </div>
    </div>
  </c-dialog>
</template>
<script lang="ts" setup>
import { computed, defineEmits, defineProps, PropType } from 'vue';
import { GVditor } from '@/components/GVditor/index';
import { CDialog } from '@/components/CDialog/index';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  info: {
    type: Object as PropType<any>,
    default: () => {
      return {};
    }
  }
});
const emit = defineEmits(['update:visible']);
const dialogVisible = computed({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
const downLoad = (url: string) => {
  window.location.href = url;
};
</script>
<style lang="scss" scoped>
.dialog-content {
  margin-top: 16px;
  max-height: 600px;
  // overflow-y: scroll;
}
.dialog-main {
  // padding: 20px;
  background: rgba(248, 251, 252, 0.92);
  border-radius: 6px;
  border: 1px solid #ffffff;
  backdrop-filter: blur(10px);
  // margin-top: 45px;
  .dialog-main-header {
    // margin-top: -72px;
    width: 100%;
  }
}
.list-dialog {
  .file-list {
    cursor: pointer;
    height: 32px;
    background: #f6f9fa;
    border-radius: 2px;
    margin-top: 8px;
    line-height: 32px;
    font-size: 14px;
    &:hover {
      color: $themeColor;
    }
  }
}
:deep(.vditor --border-color) {
  --border-color: null;
  background-color: null;
}
:deep(.vditor) {
  border: none;
}
:deep(.vditor-toolbar) {
  border-bottom: none;
}
:deep(.vditor-ir pre.vditor-reset[contenteditable='false']) {
  opacity: 1;
  cursor: auto;
  pointer-events: none;
  font-size: 14px;
  color: #51596c;
  padding: 10px 0px !important;
  background: rgba(248, 251, 252, 0.92);
  padding: 0 20px;
}

:deep(.vditor-ir) {
  background: rgba(248, 251, 252, 0.92);
}
.header-wrap {
  height: 100%;
  width: 100%;
}
</style>

<style ang="scss">
.list-dialog {
  background: url('~@/assets/images/bg_preview.png') no-repeat #fff;
  background-size: 100% 140px;
  .el-dialog__close {
    color: #ffffff;
  }
  .el-dialog__close:hover {
    color: #ffffff;
  }
}
</style>
